<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Boot WMS</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"> 
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
  <!-- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
  
  <!-- jsGrid -->
  <link rel="stylesheet" href="plugins/jsgrid/jsgrid.min.css">
  <link rel="stylesheet" href="plugins/jsgrid/jsgrid-theme.min.css">
  
  
  <!-- jquery-ui -->
  <link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.min.css">
  
  
  
  <!-- summernote -->
  <link rel="stylesheet" href="plugins/summernote/summernote-bs4.css"> 
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">  
	<div id="test1"></div> 
	<div id="test2"></div>
    
    <ul class="navbar-nav ml-auto"> 
		<div id="test3"></div> 
		<div id="test4"></div>
		<li class="nav-item">
		  <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
		    <i class="fas fa-th-large"></i>
		  </a>
		</li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <aside class="main-sidebar sidebar-dark-primary elevation-4">
  	<div id="logo1"></div> 
    <div class="sidebar">
		<div id="user1"></div>
		<nav class="mt-2">
			 <ul class="nav nav-pills nav-sidebar flex-column" 
			 	 data-widget="treeview" 
			 	 role="menu" 
			 	 data-accordion="false">
			 	<div id="menu1"></div> 
		 	 </ul>
		</nav>
  	</div> 
  </aside>  

  
  <div class="content-wrapper">
  	<!-- 主区域标题 -->
    <section class="content-header">
    	<div class="container-fluid">
	    	<div class="row mb-2">
	   			<div class="col-sm-9">
	   				<h1 class="m-0 text-dark">
	   					库位管理信息		
	   				</h1>
	   			</div>
	   			<div class="col-sm-1">
	   			<button type="button"
	   				class="btn btn-block btn-primary"
	   				data-toggle="modal"
	   				data-target="#modal-addnewLOC"
	   			>
	   			新增
	   			</button>
	   			</div>
   		
	   			<div class="col-sm-2">
	   				<ol class="breadcrumb float-sm-right">
	   					<li class="breadcrumb-item"><a href="./index.html">主页</a></li>
	   					<li class="breadcrumb-item active">库位信息</li>
	   				</ol>
	   			</div>	   			
	   		</div>
   		</div>
   		
    </section>
    <section class="content">
    	<div class="card">
    		<div class="card-header">
    			<h3 class="card-title">库位列表</h3>
    		</div>
    		<div class="card-body">
    			<div id="jsGrid1"></div>
    		</div>
    	</div>
    </section>
    
  </div>
 
 
 <div class="modal fade" id="modal-addnewLOC">
   <div class="modal-dialog modal-lg">
   	<div class="modal-content">
   	  <div class="modal-header">
   	  	<h4 class="modal-title">
   	  		新增库位
   	  	</h4>
   	  	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
   	  	  <span aria-hidden="true">&times;</span>
   	  	</button>
   	  </div>
   	  
      <div class="modal-body"> 
        <p>新增窗口</p>
	    <hr/> 
  		<div class="card-body">
       	  <form action="" name="post_form" id="post_form" role="form">
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位ID</label>
						<input type="text" id="locId" name="locId" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位名称</label>
						<input type="text" id="locName" name="locName" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位编号</label>
						<input type="text" id="locNum" name="locNum" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位类型</label>
						<input type="text" id="locType" name="locType" 
							class="form-control" placeholder="">
  					</div>
				</div>
 			</div>
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位总容量</label>
						<input type="text" id="locVol" name="locVol" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位状态</label>
						<input type="text" id="status" name="status" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位已用数</label>
						<input type="text" id="usedVol" name="usedVol" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>绑定SKU名</label>
						<input type="text" id="skuName" name="skuName" 
							class="form-control" placeholder="">
  					</div>
				</div>
 			</div>
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注1</label>
						<input type="text" id="remark1" name="remark1" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注2</label>
						<input type="text" id="remark2" name="remark2" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注3</label>
						<input type="text" id="remark3" name="remark3" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注4</label>
						<input type="text" id="remark4" name="remark4" 
							class="form-control" placeholder="">
  					</div>
				</div>
 			</div>
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注5</label>
						<input type="text" id="remark5" name="remark5" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注6</label>
						<input type="text" id="remark6" name="remark6" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
				
				</div>
				<div class="col-sm-3">
  					 
				</div>
 			</div>
       	  </form>
  		</div>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">
        	关闭</button>
        <button type="button" onclick="confirmedAdd()" data-dismiss="modal" 
        	class="btn btn-primary">确认添加</button>
      </div>
   	</div>
   </div>
 </div>
  
  <div class="modal fade" id="modal-deleteLOC">
   <div class="modal-dialog modal-lg">
   	<div class="modal-content">
   	  <div class="modal-header">
   	  	<h4 class="modal-title">
   	  		删除库位
   	  	</h4>
   	  	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
   	  	  <span aria-hidden="true">&times;</span>
   	  	</button>
   	  </div>
   	  
      <div class="modal-body"> 
      	<p>
      		是否要删除编号为： &nbsp; <span id="idNo"></span> &nbsp; 的库位。
      	</p>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">
        	关闭</button>
        <button type="button" onclick="confirmedDel()" data-dismiss="modal" 
        	class="btn btn-primary">确认删除</button>
      </div>
   	</div>
   </div>
 </div>
  
 
 <div class="modal fade" id="modal-updateLOC">
   <div class="modal-dialog modal-lg">
   	<div class="modal-content">
   	  <div class="modal-header">
   	  	<h4 class="modal-title">
   	  		修改库位
   	  	</h4>
   	  	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
   	  	  <span aria-hidden="true">&times;</span>
   	  	</button>
   	  </div>
   	  
      <div class="modal-body"> 
        <p>修改窗口</p>
	    <hr/> 
  		<div class="card-body">
       	  <form action="" name="post_form" id="post_form" role="form">
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位ID</label>
						<input type="text" id="locId" name="locId" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位名称</label>
						<input type="text" id="locName" name="locName" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位编号</label>
						<input type="text" id="locNum" name="locNum" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位类型</label>
						<input type="text" id="locType" name="locType" 
							class="form-control" placeholder="">
  					</div>
				</div>
 			</div>
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位总容量</label>
						<input type="text" id="locVol" name="locVol" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位状态</label>
						<input type="text" id="status" name="status" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>库位已用数</label>
						<input type="text" id="usedVol" name="usedVol" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>绑定SKU名</label>
						<input type="text" id="skuName" name="skuName" 
							class="form-control" placeholder="">
  					</div>
				</div>
 			</div>
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注1</label>
						<input type="text" id="remark1" name="remark1" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注2</label>
						<input type="text" id="remark2" name="remark2" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注3</label>
						<input type="text" id="remark3" name="remark3" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注4</label>
						<input type="text" id="remark4" name="remark4" 
							class="form-control" placeholder="">
  					</div>
				</div>
 			</div>
 			<div class="row">
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注5</label>
						<input type="text" id="remark5" name="remark5" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>备注6</label>
						<input type="text" id="remark6" name="remark6" 
							class="form-control" placeholder="">
  					</div>
				</div>
				<div class="col-sm-3">
  					<div class="form-group">
	  					<label>编号</label>
						<input type="text" id="id" name="id" readonly
							class="form-control" placeholder="">
  					</div>
  					 
  					 
				</div>
				<div class="col-sm-3">
					<div class="form-group">
  						<label>创建日期</label>
						<input type="text" id="createDate" name="createDate" readonly
							class="form-control" placeholder="">
  					</div> 
				</div>
 			</div>
       	  </form>
  		</div>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">
        	关闭</button>
        <button type="button" onclick="confirmedEdit()" data-dismiss="modal" 
        	class="btn btn-primary">确认修改</button>
      </div>
   	</div>
   </div>
 </div>
  
   
<div id="footer"></div>
  
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="plugins/jsgrid/jsgrid.min.js"></script>

<!-- AdminLTE App -->
<script src="dist/js/adminlte.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
</body>
<script type="text/javascript">

var gid = 0;

function timestampToString(timestamp) {
    // 创建一个新的 Date 对象，使用传入的时间戳（注意：JavaScript 的 Date 对象期望的是毫秒）
    const date = new Date(timestamp);

    // 获取各个部分
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回值是 0-11
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    // 格式化输出
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
	
	(function($){
		console.log("start");
		localStorage.setItem("menuId", 1);
		//$("#mainHeader").load("mainHeader1.html");
		$("#test1").load("test1.html");
		$("#test2").load("test2.html");
		$("#test3").load("test3.html");
		$("#test4").load("test4.html");
		$("#logo1").load("logo1.html");
		$("#user1").load("user1.html");
		$("#menu1").load("menu1.html");
		$("#footer").load("foot.html");

		initialData();
		iniTableData();
	})(jQuery);

	function confirmedEdit(){
		console.log("confirmedEdit()");
		var formData = $("#modal-updateLOC #post_form").serialize();
		
		var url1 = '../api/baseInfo/serv_meth/locService/update';
		
		$.ajax({
			url:url1,
			type: "POST",
			data: formData,
			success: function(res){
				console.log("修改提交成功");
			}
		});
		
		setTimeout(()=>{
			iniTableData();
		},555);
		
	}
	
	function confirmedDel(){
		console.log("confirmedDel()");
		
		var data1 = {"id":gid};
		var url1 = '../api/baseInfo/serv_meth/locService/delete';
		
		$.ajax({
			url: url1,
			type: "POST",
			data: data1,
			success: function(res){
				console.log("删除提交成功");
			}
		});

		setTimeout(()=> {
			iniTableData();
		},555)
	}
	
	function confirmedAdd(){
		console.log("confirmedAdd()");
		
		var formData = $("#modal-addnewLOC #post_form").serialize();
		console.log("formData-=>",formData);
		var url1 = '../api/baseInfo/serv_meth/locService/addNew';
		
		$.ajax({
			url: url1,
			type: "POST",
			data: formData,
			success: function(res){
				console.log("LOC库位新增提交成功")
			}
		});
		
		setTimeout(()=> {
			iniTableData();
		},555)
	}
	
	function iniTableData(){
		console.log("iniTableData()");
		
		var data1 = {};
		var url1 = "../api/baseInfo/serv_meth/locService/showList";
		//serv_meth locService.showList
		$.ajax({
			type: "post",
			url: url1,
			dataType: "json",
			data: data1,
			success: function(res){
				console.log("iniTableData()-=>",res);
				
				$("#jsGrid1").jsGrid({
					height: "510px",
					width: "100%",
					paging: true,
					pageSize: 10,
					data: res,
					rowDoubleClick: function(args){},
					fields:[
						{name:"id", type: "number", width:55,title:"编号"},
						{name:"locId", type: "text", width:75,title:"库位ID"},
						{name:"locName", type: "text", width:111,title:"库位名称"},
						{name:"locNum", type: "text", width:111,title:"库位编号"},
						{name:"locType", type: "text", width:111,title:"库位类型"},
						{name:"locVol", type: "text", width:111,title:"库位总容量"},
						{name:"status", type: "text", width:111,title:"库位状态"},
						{name:"usedVol", type: "text", width:111,title:"库位已用数"},
						{name:"skuName", type: "text", width:111,title:"绑定SKU名"},
						{name:"modifyDate", type: "text", width:150,title:"修改日期",
							editButton: false,
							itemTemplate: function(value,item){
								return timestampToString(value)
							}
						},
						{name:"createDate", type: "text", width:150,title:"创建日期",
							editButton: false,
							itemTemplate: function(value,item){
								return timestampToString(value)
							}
						},
						{name:"remark1", type: "text", width:50,title:"备1",
							itemTemplate: function(value){
								return '...';	
							}
						},
						{name:"remark2", type: "text", width:50,title:"备2",
							itemTemplate: function(value){
								return '...';	
							}
						},
						{name:"remark3", type: "text", width:50,title:"备3",
							itemTemplate: function(value){
								return '...';	
							}
						},
						{name:"remark4", type: "text", width:50,title:"备4",
							itemTemplate: function(value){
								return '...';	
							}
						},
						{name:"remark5", type: "text", width:50,title:"备5",
							itemTemplate: function(value){
								return '...';	
							}
						},
						{name:"remark6", type: "text", width:50,title:"备6",
							itemTemplate: function(value){
								return '...';	
							}
						},
						{
							type:"control",
							width: 85,
	                        modeSwitchButton: true,
							itemTemplate: function(value,item) {
								return $("<button>").attr("type","button").text("编辑")
									.addClass("btn btn-block btn-default")
									.on("click",function(e){
										showDetailDialog1("upd",{},value,item);
									});
							}
						},
						{
							type:"control",
							width: 85,
	                        modeSwitchButton: true,
							itemTemplate: function(value,item) {
								return $("<button>").attr("type","button").text("删除")
									.addClass("btn btn-block btn-default")
									.on("click",function(e){
										showDetailDialog1("del",{},value,item);
									});
							}
						}
						
					]
				});
				
			},
			error:function(e){
				console.log(e);
			}
		});
		
	}

/*
 */	
	
 	function showDetailDialog1(a,b,c,d){
		console.log("showDetailDialog1-=>",a,b,c,d); 
		gid = d.id;
		
		if(a==='upd'){
			$("#modal-updateLOC").modal('show');
			
			$("#modal-updateLOC #id").val(d.id);
			$("#modal-updateLOC #locId").val(d.locId);
			$("#modal-updateLOC #locName").val(d.locName);
			$("#modal-updateLOC #locNum").val(d.locNum);
			$("#modal-updateLOC #locType").val(d.locType);
			$("#modal-updateLOC #locVol").val(d.locVol);
			$("#modal-updateLOC #status").val(d.status);
			$("#modal-updateLOC #usedVol").val(d.usedVol);
			$("#modal-updateLOC #skuName").val(d.skuName);
			$("#modal-updateLOC #createDate").val(timestampToString(d.createDate));
			$("#modal-updateLOC #remark1").val(d.remark1);
			$("#modal-updateLOC #remark2").val(d.remark2);
			$("#modal-updateLOC #remark3").val(d.remark3);
			$("#modal-updateLOC #remark4").val(d.remark4);
			$("#modal-updateLOC #remark5").val(d.remark5);
			$("#modal-updateLOC #remark6").val(d.remark6);
			
		}else if(a === 'del'){
			$("#modal-deleteLOC").modal('show');
			$("#modal-deleteLOC #idNo").text(d.id);
		}
	}
	
	function initialData(){
		

		setTimeout(function () { 
			console.log("initialData 库位管理信息 changeActive3333");
			changeMenuActive(3);
    },1000);
    
	}


	var str1 = `
		<div>
			123
		</div>
	`
/*

var actions = [];
actions.push('<div class="btn-group">');
actions.push('<button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false">');
actions.push('<i class="fa fa-cog"></i>&nbsp;<span class="fa fa-chevron-down"></span></button>');
actions.push('<ul class="dropdown-menu">');
actions.push(value.replace(/<a/g,"<li><a").replace(/<\/a>/g,"</a></li>"));
actions.push('</ul>');
actions.push('</div>');
return actions.join('');
                
*/



</script>
</html>